<template>
  <view :class="['test-item', answer || check ? 'show-answer' : '']" :key="testItem.paperQuestionsId">
    <view class="test-title" :id="'child' + testIndex">
      <text class="test-title-icon" v-if="getType(testItem.fromQuestionsType)">
        {{ typeList[testItem.questionsTypeId] || getType(testItem.fromQuestionsType) }}
      </text>
      <text>{{ index + '. ' }}</text>
      <text class="test-title-content">{{testItem.content}}</text>
      <!--<rich-text :nodes="testItem.content"></rich-text>-->
      <!--<text>{{testItem.content}}</text>-->
      <text v-if="testItem.score && testItem.score !== -1 && showScore">（{{ testItem.score }}分）</text>
      <text class="fill-notice" v-if="testItem.fillVali">这道题未回答</text>
    </view>
    <exam-file
        :video-show="videoShow"
        ref="examFile"
        :type="testItem.fileType"
        :id="testIndex"
        :url="testItem.fileHttpUrl"
        :file-storage="testItem.fileStorage"
        v-if="testItem.fileHttpUrl || testItem.fileUrl"></exam-file>
    <van-radio-group
        v-model="value"
        :disabled="edit || !!(reply && answer)"
        v-if="testItem.fromQuestionsType === 'T' || testItem.fromQuestionsType === 'R'">
      <label class="van-group-wrap" v-for="(item, index) in testItem.optionsDtoList" :key="index">
        <van-radio
            :class="[(edit || !!(reply && answer)) && item.isRightAnswer == 1 ? 'right' : '', (edit || !!(reply && answer)) && value === (item.paperQuestionsOptionsId || item.optionsId || item.paperQuestionsOptionsId) && item.isRightAnswer != 1 ? 'error' : '', ]"
            :name="item.paperQuestionsOptionsId || item.optionsId || item.jobQuestionsOptionsId">{{ indexList[index] + '. ' + item.content }}
        </van-radio>
        <exam-file
            :video-show="videoShow"
            ref="examFile"
            :type="item.fileType"
            :id="testIndex + '-options' + index"
            :url="item.fileHttpUrl"
            :file-storage="item.fileStorage"
            v-if="item.fileHttpUrl || item.fileUrl"></exam-file>
      </label>
    </van-radio-group>
    <van-checkbox-group
        v-model="value"
        :disabled="edit || !!(reply && answer)"
        v-else-if="testItem.fromQuestionsType === 'M'">
      <label class="van-group-wrap" v-for="(item, index) in testItem.optionsDtoList" :key="index">
        <van-checkbox
            :icon-size="20" shape="square"
            :class="[(edit || !!(reply && answer)) && item.isRightAnswer == 1 ? 'right' : '', (edit || !!(reply && answer)) && value && value.includes((item.paperQuestionsOptionsId || item.optionsId || item.jobQuestionsOptionsId || item.jobQuestionsOptionsId)) && item.isRightAnswer != 1 ? 'error' : '', ]"
            :name="item.paperQuestionsOptionsId ||item.jobQuestionsOptionsId || item.optionsId">{{ indexList[index] + '. ' + item.content }}
        </van-checkbox>
        <exam-file
            :video-show="videoShow"
            ref="examOptionsFile"
            :type="item.fileType"
            :id="testIndex + '-options' + index"
            :url="item.fileHttpUrl"
            :file-storage="item.fileStorage"
            v-if="item.fileHttpUrl || item.fileUrl"></exam-file>
      </label>
    </van-checkbox-group>
    <view v-else-if="testItem.fromQuestionsType === 'F' && testItem.fillCount">
      <van-field
          class="van-input"
          v-model="value[i]"
          label="填空"
          placeholder="请输入内容"
          rows="1"
          autosize
          type="textarea"
          :disabled="edit || !!(reply && answer)"
          v-for="(it, i) in testItem.fillCount"
          :key="i">
      </van-field>
    </view>
    <view v-else-if="testItem.fromQuestionsType === 'F'">
      <van-field
          class="van-input"
          v-model="value[0]"
          :disabled="edit || !!(reply && answer)"
          label="填空"
          rows="1"
          autosize
          type="textarea"
          placeholder="请输入内容"/>
    </view>
    <view v-else-if="testItem.fromQuestionsType === 'A'">
      <van-field
          class="van-textarea"
          v-model="value"
          :disabled="edit || !!(reply && answer)"
          rows="4"
          autosize
          maxlength="800"
          type="textarea"
          placeholder="请输入内容"/>
    </view>
    <template v-if="answer && !testItem.retrospectStatus">
      <view class="test-answer green fs-16 flex-wrap" v-if="testItem.fromQuestionsType !== 'F'">
        <text class="fc-333">{{ text[testItem.questionsType] || '正确答案' }}：</text>
        <rich-text :nodes="isRightAnswer" class="flex-item"></rich-text>
      </view>
      <exam-file
          ref="examAnswerFile"
          :video-show="videoShow"
          :type="testItem.answerFileType"
          :id="testIndex + '-answer'"
          :url="testItem.answerFileHttpUrl"
          :file-storage="testItem.answerFileStorage"
          v-if="testItem.answerFileHttpUrl || testItem.answerFileUrl"></exam-file>
      <view class="test-answer fs-16 flex-wrap fc-7f">
        <text>解析：</text>
        <rich-text :nodes="testItem.remark || '暂无'" class="flex-item"></rich-text>
      </view>
      <exam-file
          ref="examRemarkFile"
          :video-show="videoShow"
          :type="testItem.remarkFileType"
          :id="testIndex + '-remark'"
          :url="testItem.remarkFileHttpUrl"
          :file-storage="testItem.remarkFileStorage"
          v-if="testItem.remarkFileHttpUrl || testItem.remarkFileUrl"></exam-file>
    </template>
    <template
        v-else-if="answer && answer !== '2' && answer !== '3' && (testItem.retrospectStatus === '2' || testItem.retrospectStatus === '0')">
      <view class="test-answer red fs-16 flex-wrap" v-if="testItem.fromQuestionsType !== 'F'">
        <text class="fc-333 fw-b">{{ text[testItem.questionsType] || '正确答案' }}：</text>
        <rich-text :nodes="isRightAnswer" class="flex-item"></rich-text>
      </view>
      <exam-file
          ref="examRemarkFile"
          :video-show="videoShow"
          :type="testItem.answerFileType"
          :id="testIndex + '-answer'"
          :url="testItem.answerFileHttpUrl"
          :file-storage="testItem.answerFileStorage"
          v-if="testItem.answerFileHttpUrl || testItem.answerFileUrl"></exam-file>
      <view class="test-answer fs-16 flex-wrap fc-7f">
        <text>解析：</text>
        <rich-text :nodes="testItem.remark || '暂无'" class="flex-item"></rich-text>
      </view>
      <exam-file
          :videoShow="videoShow"
          ref="examRemarkFile"
          :type="testItem.remarkFileType"
          :id="testIndex + '-remark'"
          :url="testItem.remarkFileHttpUrl"
          :fileStorage="testItem.remarkFileStorage"
          v-if="testItem.remarkFileHttpUrl || testItem.remarkFileUrl"></exam-file>
    </template>
    <template v-else-if="answer && answer !== '2' && answer !== '3' && testItem.retrospectStatus === '1'">
      <view class="test-answer green fs-16 flex-wrap" v-if="testItem.fromQuestionsType !== 'F'">
        <text class="fc-333 fw-b">{{ text[testItem.questionsType] || '正确答案' }}：</text>
        <rich-text :nodes="isRightAnswer" class="flex-item"></rich-text>
      </view>
      <exam-file
          :videoShow="videoShow"
          ref="examAnswerFile"
          :type="testItem.answerFileType"
          :id="testIndex + '-answer'"
          :url="testItem.answerFileHttpUrl"
          :fileStorage="testItem.answerFileStorage"
          v-if="testItem.answerFileHttpUrl || testItem.answerFileUrl"></exam-file>
      <view class="test-answer fs-16 flex-wrap fc-7f">
        <text>解析：</text>
        <rich-text :nodes="testItem.remark || '暂无'" class="flex-item"></rich-text>
      </view>
      <exam-file
          :videoShow="videoShow"
          ref="examRemarkFile"
          :type="testItem.remarkFileType"
          :id="testIndex + '-remark'"
          :url="testItem.remarkFileHttpUrl"
          :fileStorage="testItem.remarkFileStorage"
          v-if="testItem.remarkFileHttpUrl || testItem.remarkFileUrl"></exam-file>
    </template>
    <template v-else-if="answer && answer !== '3' && testItem.retrospectStatus === '4'">
      <view class="test-answer fs-16" v-if="answer !== '1'">
        <text class="fc-primary">评分：{{ testItem.examineeScore }}分</text>
        <text class="fs-16 fc-primary mt5" v-if="testItem.checkExplain">评语：{{ testItem.checkExplain }}</text>
      </view>
      <view class="test-answer green fs-16 flex-wrap" v-if="answer !== '2' && testItem.fromQuestionsType !== 'F'">
        <text>{{ text[testItem.questionsType] || '正确答案' }}：</text>
        <rich-text :nodes="isRightAnswer" class="flex-item"></rich-text>
      </view>
      <exam-file
          :videoShow="videoShow"
          ref="examAnswerFile"
          :type="testItem.answerFileType"
          :id="testIndex + '-answer'"
          :url="testItem.answerFileHttpUrl"
          v-if="testItem.answerFileHttpUrl && answer !== '2'"></exam-file>
      <view class="test-answer fs-16 flex-wrap fc-7f" v-if="answer !== '2'">
        <text>解析：</text>
        <rich-text :nodes="testItem.remark || '暂无'" class="flex-item"></rich-text>
      </view>
      <exam-file
          :videoShow="videoShow"
          ref="examRemarkFile"
          :type="testItem.remarkFileType"
          :id="testIndex + '-remark'"
          :url="testItem.remarkFileHttpUrl"
          v-if="testItem.remarkFileHttpUrl && answer !== '2'"></exam-file>
    </template>
    <template v-else-if="answer && answer !== '2' && answer !== '3' && testItem.retrospectStatus">
      <view class="test-answer green fs-16 flex-wrap" v-if="testItem.fromQuestionsType !== 'F'">
        <text>{{ text[testItem.questionsType] || '正确答案' }}：</text>
        <rich-text :nodes="isRightAnswer" class="flex-item"></rich-text>
      </view>
      <exam-file
          :videoShow="videoShow"
          ref="examAnswerFile"
          :type="testItem.answerFileType"
          :id="testIndex + '-answer'"
          :url="testItem.answerFileHttpUrl"
          :fileStorage="testItem.answerFileStorage"
          v-if="testItem.answerFileHttpUrl || testItem.answerFileUrl"></exam-file>
      <view class="test-answer fs-16 flex-wrap fc-7f">
        <text>解析：</text>
        <rich-text :nodes="testItem.remark || '暂无'" class="flex-item"></rich-text>
      </view>
      <exam-file
          :videoShow="videoShow"
          ref="examRemarkFile"
          :type="testItem.remarkFileType"
          :id="testIndex + '-remark'"
          :url="testItem.remarkFileHttpUrl"
          :fileStorage="testItem.remarkFileStorage"
          v-if="testItem.remarkFileHttpUrl || testItem.remarkFileUrl"></exam-file>
    </template>
    <template v-else-if="check && (testItem.retrospectStatus === '3' || testItem.retrospectStatus === '4')">
      <view class="test-answer green fs-16 flex-wrap" v-if="testItem.fromQuestionsType !== 'F'">
        <text>{{ text[testItem.questionsType] || '正确答案' }}：</text>
        <rich-text :nodes="isRightAnswer" class="flex-item"></rich-text>
      </view>
      <exam-file
          :videoShow="videoShow"
          ref="examAnswerFile"
          :type="testItem.answerFileType"
          :id="testIndex + '-answer'"
          :url="testItem.answerFileHttpUrl"
          :fileStorage="testItem.answerFileStorage"
          v-if="testItem.answerFileHttpUrl || testItem.answerFileUrl"></exam-file>
      <view class="test-answer fs-16 flex-wrap fc-7f">
        <text>解析：</text>
        <rich-text :nodes="testItem.remark || '暂无'" class="flex-item"></rich-text>
      </view>
      <exam-file
          :videoShow="videoShow"
          ref="examRemarkFile"
          :type="testItem.remarkFileType"
          :id="testIndex + '-remark'"
          :url="testItem.remarkFileHttpUrl"
          :fileStorage="testItem.remarkFileStorage"
          v-if="testItem.remarkFileHttpUrl || testItem.remarkFileUrl"></exam-file>
      <view class="group-wrap" v-if="check !== '0'">
        <button
            class="nav-bar-btn"
            type="primary"
            round
            @click="changeCheck(testItem.score)">{{ flag ? '已批阅' : '批阅' }}
        </button>
      </view>
      <view class="test-answer" v-else>
        <text class="fs-16">
          <text class="fc-7f">评分：</text>
          <text class="fc-333">{{ testItem.examineeScore }}分</text>
        </text>
        <text class="fs-16 mt5" v-if="testItem.checkExplain">
          <text class="fc-7f">评语：</text>
          <text class="fc-333">{{ testItem.checkExplain }}</text>
        </text>
      </view>
    </template>
    <template v-else-if="check && testItem.retrospectStatus === '2'">
      <view class="test-answer red fs-16 flex-wrap" v-if="testItem.fromQuestionsType !== 'F'">
        <text class="fc-333 fw-b">{{ text[testItem.questionsType] || '正确答案' }}：</text>
        <rich-text :nodes="isRightAnswer" class="flex-item"></rich-text>
      </view>
      <exam-file
          :videoShow="videoShow"
          ref="examAnswerFile"
          :type="testItem.answerFileType"
          :id="testIndex + '-answer'"
          :url="testItem.answerFileHttpUrl"
          :fileStorage="testItem.answerFileStorage"
          v-if="testItem.answerFileHttpUrl || testItem.answerFileUrl"></exam-file>
      <view class="test-answer fs-16 flex-wrap fc-7f">
        <text>解析：</text>
        <rich-text :nodes="testItem.remark || '暂无'" class="flex-item"></rich-text>
      </view>
      <exam-file
          :videoShow="videoShow"
          ref="examRemarkFile"
          :type="testItem.remarkFileType"
          :id="testIndex + '-remark'"
          :url="testItem.remarkFileHttpUrl"
          :fileStorage="testItem.remarkFileStorage"
          v-if="testItem.remarkFileHttpUrl || testItem.remarkFileUrl"></exam-file>
    </template>
    <template v-else-if="check">
      <view class="test-answer green fs-16 flex-wrap" v-if="testItem.fromQuestionsType !== 'F'">
        <text class="fc-333 fw-b">{{ text[testItem.questionsType] || '正确答案' }}：</text>
        <rich-text :nodes="isRightAnswer" class="flex-item"></rich-text>
      </view>
      <exam-file
          :videoShow="videoShow"
          ref="examAnswerFile"
          :type="testItem.answerFileType"
          :id="testIndex + '-answer'"
          :url="testItem.answerFileHttpUrl"
          :fileStorage="testItem.answerFileStorage"
          v-if="testItem.answerFileHttpUrl || testItem.answerFileUrl"></exam-file>
      <view class="test-answer fs-16 flex-wrap fc-7f">
        <text>解析：</text>
        <rich-text :nodes="testItem.remark || '暂无'" class="flex-item"></rich-text>
      </view>
      <exam-file
          :videoShow="videoShow"
          ref="examRemarkFile"
          :type="testItem.remarkFileType"
          :id="testIndex + '-remark'"
          :url="testItem.remarkFileHttpUrl"
          :fileStorage="testItem.remarkFileStorage"
          v-if="testItem.remarkFileHttpUrl || testItem.remarkFileUrl"></exam-file>
    </template>
    <template v-else-if="reply && !answer">
      <view class="test-btn fs-16 flex-wrap">
        <button
            class="btn"
            type="primary"
            @click="sureInput">确认
        </button>
      </view>
    </template>
  </view>

</template>

<script setup>
import {ref, computed, watch, onMounted, toRefs,getCurrentInstance} from 'vue';
import ExamFile from './examFile.vue';
import {getType} from '@/assets/js/type.js'
import {haveEmoji,removeComplexEmoji} from '@/assets/js/util.js'
import VanRadioGroup from "@/components/vant/van-radio-group/van-radio-group.vue";
import VanRadio from "@/components/vant/van-radio/van-radio.vue";
import VanCheckboxGroup from "@/components/vant/van-checkbox-group/van-checkbox-group.vue";
import VanCheckbox from "@/components/vant/van-checkbox/van-checkbox.vue";
import VanField from "@/components/vant/van-field/van-field.vue";
const { $toast} = getCurrentInstance().proxy;
// 使用ref定义响应式数据
const indexList = ref(['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O']);
const text = ref({
  'R': '正确答案',
  'T': '正确答案',
  'M': '正确答案',
  'F': '参考答案',
  'A': '参考答案',
});
const value = ref('');
const scoreVal = ref(null);
const explain = ref('');

// 省略其他响应式数据定义

const emit = defineEmits(['input', 'changeCheck', 'sureInput']);
// 接收props
const props = defineProps({
  testItem: {
    type: Object,
    default: () => ({type: 0})
  },
  testIndex: {
    type: Number,
    default: 0
  },
  edit: { // 是否是回顾
    type: Boolean,
    default: false
  },
  answer: { // 是否显示答案 Boolean 显示答案与否 Number 0未做 1正确 2错误 3待评 String '1'只显示答案   '2'只显示分数
    type: [Boolean, Number, String],
    default: false
  },
  check: { // 是否阅卷
    type: String,
    default: ''
  },
  reply: { // 是否显示回答确认按键
    type: Boolean,
    default: false
  },
  showScore: { // 是否显示试题分数
    type: Boolean,
    default: true
  },
  idkey: {
    type: String,
    default: ''
  },
  val: [String, Number, Array, Boolean, Object],
  score: [Number, String],
  checkExplain: {
    type: String,
    default: ''
  },
  showType: { // 是否展示题型
    type: Boolean,
    default: false
  },
  flag: { // 是否批阅完成
    type: Boolean,
    default: false
  },
  typeList: {
    type: Array,
    default: () => []
  },
  videoShow: {
    type: Boolean,
    default: true
  }
});

const {
  score,
  val,
  testItem,
  testIndex,
  edit,
  answer,
  check,
  reply,
  showScore,
  idkey,
  checkExplain,
  showType,
  flag,
  typeList,
  videoShow
} = toRefs(props)

onMounted(() => {
		console.log("this.testItem哈哈哈",testItem.value)
})

const index = ref(0)
// 计算属性
const isRightAnswer = computed(() => {
  if (testItem.value.fromQuestionsType === 'T' ||
      testItem.value.fromQuestionsType === 'R' ||
      testItem.value.fromQuestionsType === 'M') {
    return rightAnswer(testItem.value.optionsDtoList, 'isRightAnswer', '1');
  } else {
    return testItem.value.answerContent || '';
  }
});

function double(i) {
  return i > 9 ? i : ('0' + i);
}

function rightAnswer(list, key, val) {
  let arr = [];
  list.forEach((e, i) => {
    if (e[key] === val) {
      arr.push(indexList.value[i]);
    }
  });
  return arr.join(',');
}

function changeCheck(score) {
  emit('changeCheck', idkey.value, score);
}

function sureInput() {
  emit('sureInput', idkey.value, value.value, true);
}

// 监听器
watch(()=>testItem.value, (newVal)=>{
  console.log(`=>(exam.vue:480) newVal`, newVal);
  scoreVal.value = score.value || undefined
  explain.value = checkExplain.value || ''
  value.value = val.value || ''
  index.value = double(newVal.index + 1)
}, {immediate: true})

watch(() => idkey.value, (newVal) => {
  console.log(`=>(exam.vue:492) newVal`, newVal);

})
watch(() => val.value, (newVal) => {
  if (newVal === '[]') {
    value.value = [];
  } else {
	   if (haveEmoji(newVal)) {
			$toast.warning('禁止输入包含emoji表情的字符，系统已自动清除该字符')
			value.value = removeComplexEmoji(newVal)
		}else {
			value.value = newVal;
		}
		// value.value = newVal;
  }
},{deep: true});

watch(() => score.value, (newVal) => {
// 处理score变化
  scoreVal.value = newVal
});

watch(() => value.value, (newVal) => {
    if (haveEmoji(newVal)) {
			$toast.warning('禁止输入包含emoji表情的字符，系统已自动清除该字符');
			value.value = removeComplexEmoji(newVal);
			// emit('input', idkey.value, value.value);
		}else {
			 emit('input', idkey.value, newVal);
		}
}, {deep: true,immediate: true});
</script>

<style lang="scss" scoped>
.test-item {
  padding-bottom: 50px;

  &.show-answer {
    padding-bottom: 15px;
  }

  &.show-answer:last-child {
    padding-bottom: 25px;
  }
}

.test-title {
  color: #000;
  font-size: 16px;
  padding: 15px 0;
  line-height: 28px;
  font-weight: bold;
  margin: 0 0 10px;
  :deep(rich-text) {
    display: inline-block;
  }

  .test-title-icon {
    display: inline-block;
    text-align: center;
    //width: 38px;
    padding: 0 2px;
    height: 18px;
    line-height: 18px;
    font-size: 10px;
    color: #fff;
    background: linear-gradient(163deg, #40D2CC 0%, #1EA69D 100%);
    border-radius: 2px;
    vertical-align: text-bottom;
    margin-right: 5px;
  }

  .fill-notice {
    display: inline-block;
    width: 94px;
    height: 28px;
    color: #fff;
    font-size: 12px;
    background: #D0021B;
    border-radius: 2px;
    text-align: center;
    margin-left: 12px;
    vertical-align: bottom;
  }

  .test-title-content {
    :deep(p) {
      display: inline;
    }

    :deep(br) {
      display: none;
    }
  }
}

.red {
  color: #DF0000;
}

.test-answer {
  padding: 10px 0;
  color: #333;
  margin-top: 15px;

  & + .test-answer {
    margin-top: 0;
    padding-top: 0;
  }
}

.test-answer.green {
  color: #1EA69D;
}

.test-answer.red {
  color: #D0021B;
}

.test-btn {
  padding: 25px 0 0;

  .btn {
    width: 120px;
    height: 40px;
    background: #1EA69D;
    border-radius: 20px;
  }
}

.van-radio-group {
  &:not(:first-child) {
    .van-radio {
      margin-top: 15px;
    }
  }

  .van-radio {
    background: #FAFAFA;
    border-radius: 4px;
    border: 1px solid #EEEEEE;
    padding: 15px 15px;
    width: 100%;

    &[aria-checked=true], &.right {
      background: rgba(0, 169, 158, 0.06);
      border: 1px solid #1EA69D;
    }

    &.error {
      background: rgba(223, 0, 0, 0.05);
      border: 1px solid rgba(223, 0, 0, 0.4);
    }

    & + .exam-file-wrap {
      margin-top: 10px;
    }

    :deep(.van-radio__icon) {
      width: 20px;
      height: 20px;

      .van-icon {
        line-height: 20px;
        width: 20px;
        height: 20px;
      }
    }

    :deep(.van-radio__label) {
      font-size: 16px;
      color: #333;
      margin-left: 10px;
    }
  }
}

.van-checkbox-group {
  &:not(:first-child) {
    .van-checkbox {
      margin-top: 15px;
    }
  }

  .van-checkbox {
    background: #FAFAFA;
    border-radius: 4px;
    border: 1px solid #EEEEEE;
    padding: 15px 15px;

    &[aria-checked=true] {
      background: rgba(0, 169, 158, 0.06);
      border: 1px solid #1EA69D;
    }

    &.right {
      background: rgba(0, 169, 158, 0.06);
      border: 1px solid #1EA69D;
    }

    &.error {
      background: rgba(223, 0, 0, 0.05);
      border: 1px solid rgba(223, 0, 0, 0.4);
    }


    & + .exam-file-wrap {
      margin-top: 10px;
    }

    :deep(.van-checkbox__icon) {
      width: 20px;
      height: 20px;

      .van-icon {
        line-height: 20px;
        width: 20px;
        height: 20px;
      }
    }

    :deep(.van-checkbox__label) {
      font-size: 16px;
      color: #333;
      margin-left: 10px;
    }
  }
}

.van-input {
  padding: 0;
  background: #FAFAFA;
  border: 1px solid #EEEEEE;
  border-radius: 4px;

  :deep(.van-field__label) {
    padding: 10px;
    width: 80px;
    text-align: center;
    font-size: 16px;
    color: #333333;
    background: #fff;
    border-right: 1px solid #EEEEEE;
  }

  :deep(.van-field__value) {
    padding: 10px 10px 10px 0;
  }
}

.van-textarea {
  background: #FAFAFA;
  border: 1px solid #EEEEEE;
  border-radius: 4px;
}

.group-wrap {

}

.fc-7f {
  color: #7F7F7F;
}

.nav-bar-btn {
  white-space: nowrap;
  width: 86px;
  height: 40px;
}
</style>